<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            float: left;
            width: 100px;
            height: 100px;
            color: #ccc;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const gift = '50g茶叶，清洗球'
        const div = document.querySelector('div')
        // 1. 把字符串转为数组
        // const arr = gift.split('，')
        // 2. 数组map方法，得到新数组['<span>赠品</span>']
        // const arrMap = arr.map(el => {
        //     return `
        //     <span>[赠品]</span><span>${el}</span><br>
        //     `
        // })
        // 3. 将得到的数组转为字符串，放到div里面
        // div.innerHTML = arrMap.join('')

        div.innerHTML = gift.split('，').map(el => {
            return `
            <span>【赠品】${el}</span>
            `
        }).join('')
    </script>
</body>

</html>